<template>
    <div class="Frequency" :class="{
        readonly: readonly
    }">
        <a-input-number :size="option.size" :allowClear="option.allowClear" class="Star" :disabled="readonly"
            :min="option.min ?? Infinity" :max="option.max ?? Infinity" :step="option.step || 1"
            :precision="option.precision" v-model:value="Data.Star" :controls="false" :addon-after="option.unit"
            :addon-before="option.inputLabel[0]" />
        <a-input-number :size="option.size" :allowClear="option.allowClear" class="End" :disabled="readonly"
            :min="option.min ?? Infinity" :max="option.max ?? Infinity" :step="option.step || 1"
            :precision="option.precision" v-model:value="Data.End" :controls="false" :addon-after="option.unit"
            :addon-before="option.inputLabel[1]" />
    </div>
</template>
<script setup>
import { ref, watch, watchEffect } from 'vue';

const emit = defineEmits(['UpdateEvent', 'SetError']);
const props = defineProps({
    option: Object,
    Value: {},
});

const readonly = ref(false);

watchEffect(() => {
    readonly.value = !!props.option.readonly
})

const Data = ref({
    Star: 0,
    End: 0,
})

const KeyMapping = {
    Star: 'Star',
    End: 'End'
}

// 初始化值绑定
for (let i = 0; i < props.option.MultiKeyDefault.length; i++) {
    const element = props.option.MultiKeyDefault[i];
    watch(() => props.Value[element.ValueKey], (val) => { Data.value[element.FormKey] = val }, { immediate: true });
    KeyMapping[element.FormKey] = element.ValueKey;
}

watch(() => Data.value.Star, val => {
    emit('UpdateEvent', KeyMapping.Star, val)
}, { immediate: true })

watch(() => Data.value.End, val => {
    emit('UpdateEvent', KeyMapping.End, val)
}, { immediate: true });

watchEffect(() => {
    if (Data.value.Star > Data.value.End) {
        emit('SetError', '数值输入错误')
    } else {
        emit('SetError', null)
    }
})





</script>
<style lang="less" scoped>
.Frequency {
    display: flex;

    .Star,
    .End {
        width: 100%;
    }
}

:deep(.ant-input-number-group-addon:last-child) {
    border-radius: 0;
    border-right-width: 0px;
    background-color: transparent;
}

.End {
    :deep(.ant-input-number-group-addon:last-child) {
        border-right-width: 1px;
    }
}


:deep(.ant-input-number) {
    border-right-color: transparent;
}

.readonly {
    :deep(.ant-input-number-group-addon:last-child) {
        background-color: #f5f5f5;
    }
}

:deep(.ant-input-number-focused) {
    border-right-color: #40a9ff;
}
</style>